<template>
  <div class="myuser">
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息" class="pane">
        <el-scrollbar style="width: 80%; height: 100%">
          <el-card class="showCard">
            <el-form size="small" style="text-align: center">
              <el-tooltip content="点击修改头像">
                <el-form-item>
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    ref="upload"
                    :headers="uploadHeader"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <el-avatar
                      :size="150"
                      :src="imageUrl"
                      :key="new Date().getTime()"
                      @error="errorHandler"
                      v-if="imageUrl"
                    >
                    </el-avatar>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-tooltip>
              <el-form-item label="">
                <el-progress
                  :text-inside="true"
                  :stroke-width="22"
                  :percentage="infoIntegrity"
                  :show-text="true"
                  :format="format"
                  :color="integrityColor"
                ></el-progress>
              </el-form-item>
              <el-form-item label="账号" class="form-item">
                <el-input disabled v-model="userData.user.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" class="form-item">
                <el-input
                  disabled
                  v-model="userData.user.enableMail"
                ></el-input>
              </el-form-item>
              <el-form-item label="昵称" class="form-item">
                <el-input v-model="userData.userInfo.nickName"></el-input>
              </el-form-item>
              <el-form-item label="手机" class="form-item">
                <el-input v-model="userData.userInfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="工作" class="form-item">
                <el-input v-model="userData.userInfo.job"></el-input>
              </el-form-item>
              <el-form-item label="性别" class="form-item">
                <el-radio-group v-model="userData.userInfo.gender">
                  <el-radio :label="'m'"
                    ><span style="color: #409eff">男</span></el-radio
                  >
                  <el-radio :label="'w'"
                    ><span style="color: #f56c6c">女</span></el-radio
                  >
                  <el-radio :label="'0'"
                    ><span style="color: #606266">未知</span></el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="生日" class="form-item">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="userData.userInfo.birthday"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <!-- <el-button
                style="width: 100px"
                round
                type="info"
                v-show="isEdit"
                @click="isEdit = !isEdit"
                >编辑</el-button
              > -->
                <el-button
                  style="width: 100px"
                  round
                  type="primary"
                  @click="saveInfo"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="密码设置" class="pane">
        <el-card class="showCard" style="width:80%">
          <el-form size="small" style="text-align: center">
            <el-form-item label="当前密码">
              <el-input
                type="password"
                placeholder="旧密码"
                v-model="updatePassword.oldPassword"
              ></el-input>
            </el-form-item>
            <el-form-item label="新设密码" class="form-item">
              <el-input
                type="password"
                placeholder="新密码"
                v-model="updatePassword.newPassword"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" class="form-item">
              <el-input
                type="password"
                placeholder="确认密码"
                v-model="compirePassword"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="邮箱验证" class="form-item">
            <el-input style="width: 50%" placeholder="输入验证码">
              <el-button slot="append" @click="getMailCode">{{
                getMailCodeText
              }}</el-button>
            </el-input>
          </el-form-item> -->
            <el-form-item label="">
              <el-button type="primary" @click="submitUpdatePassword" round>确认修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as api from "@/js/api";
import * as util from "@/js/util"
export default {
  name: "user",
  data() {
    return {
      isEdit: true,
      getMailCodeText: "获取验证码",
      enableCode: true,
      time: null,
      username: "test",
      imageUrl: "",
      uploadUrl: window._apiUrl.webUrl + "/userInfo/uploadAvatar",
      uploadHeader: {
        Authorization: sessionStorage.getItem("token"),
      },
      userData: {
        user: {
          username: "2",
        },
        userInfo: {},
      },
      infoIntegrity: 25,
      integrityColor: "#F56C6C",
      updatePassword:{},
      compirePassword:null
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100
        ? "非常完美：" + `${percentage}%`
        : "资料完整度：" + `${percentage}%`;
    },
    submitUpdatePassword(){
      let result = util.checkUpdatePassword(this.updatePassword,this.compirePassword);
      console.log(result)
      if(!result.status){
        this.$message({
          type: 'warning',
          message: result.message
        })
      }else{
        console.log("可以修改ima")
        api.updatePassword(this.updatePassword).then(res=>{
          this.$message({
            type: res.status?'success':'error',
            message: res.message
          })
        })
      }
    },
    saveInfo() {
      api.updateUserInfo(this.userData.userInfo).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.getUserInfo();
      });
    },
    errorHandler() {
      return true;
    },
    getMailCode() {
      console.log("dianji");
      if (this.enableCode) {
        let count = 50;
        this.enableCode = false;
        this.time = setInterval(() => {
          console.log(count);
          count = count - 1;
          this.getMailCodeText = "请在" + count + "秒后重试";
          if (count < 1) {
            clearInterval(this.time);
            this.enableCode = true;
            this.getMailCodeText = "获取验证码";
          }
        }, 1000);
      } else {
        this.$message({
          type: "error",
          message: "请稍后重试",
        });
      }
    },
    handleAvatarSuccess(res) {
      this.$message({
        type: res.status ? "success" : "error",
        message: res.message,
      });
      this.$router.go(0);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getUserInfo() {
      this.infoIntegrity = 25;
      api.getUserInfo().then((res) => {
        console.log(res);
        this.userData.user = res.data.user;
        this.userData.userInfo = res.data.userInfo;
        // document.getElementById("avatar").src=res.data.userInfo.avatar;
        this.imageUrl = res.data.userInfo.avatar;
        let temp = res.data.userInfo;
        if (temp.nickName != null && temp.nickName.trim() != "") {
          this.infoIntegrity = this.infoIntegrity + 15;
        }
        if (temp.phone != null && temp.phone.trim() != "") {
          this.infoIntegrity = this.infoIntegrity + 15;
        }
        if (temp.job != null && temp.job.trim() != "") {
          this.infoIntegrity = this.infoIntegrity + 15;
        }
        if (temp.gender != "0") {
          this.infoIntegrity = this.infoIntegrity + 15;
        }
        if (temp.birthday != null && temp.birthday.trim() != "") {
          this.infoIntegrity = this.infoIntegrity + 15;
        }
        switch (this.infoIntegrity) {
          case 25:
            this.integrityColor = "#F56C6C";
            break;
          case 40:
            this.integrityColor = "#E6A23C";
            break;
          case 55:
            this.integrityColor = "#409EFF";
            break;
          case 70:
            this.integrityColor = "#409EFF";
            break;
          case 85:
            this.integrityColor = "#67C23A";
            break;
          case 100:
            this.integrityColor = "#67C23A";
            break;
        }
      });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>
<style scoped>
.form-item {
  text-align: left;
}
.avatar {
  width: 150px;
}
.showCard {
  width: 100%;
}
.pane {
  display: flex;
  justify-content: center;
  height: 100%;
}
</style>
<style>
:focus {
  outline: none;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-tabs__content {
  height: 90vh;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
</style>